<template>
  <div class="calendar-map-area card-area" v-loading="dataLoading">
    <div class="card-title">
      <h3>{{ monthVal }}月攻击组织活跃情况</h3>
    </div>
    <div class="content-area">
      <div class="calender-chart" ref="calenderChart"></div>
    </div>
  </div>
</template>

<script>
const chartData = [
  {
    "viewDay": "20240401",
    "aptNum": 19,
    "aptOrg": "黑客组织一,黑客组织2"
  },
  {
    "viewDay": "20240402",
    "aptNum": 2,
    "aptOrg": "黑客组织一,黑客组织2"
  },
  {
    "viewDay": "20240403",
    "aptNum": 3,
    "aptOrg": "silverfox,黑客组织一,黑客组织2"
  },
  {
    "viewDay": "20240404",
    "aptNum": 1,
    "aptOrg": "silverfox"
  },
  {
    "viewDay": "20240405",
    "aptNum": 2,
    "aptOrg": "silverfox,APT-C-53(Gamaredon)"
  },
  {
    "viewDay": "20240406",
    "aptNum": 1,
    "aptOrg": "APT-C-53(Gamaredon)"
  },
  {
    "viewDay": "20240407",
    "aptNum": 8,
    "aptOrg": "Lotus Blossom,APT-C-26(Lazarus),NewsBeef,APT-C-20(APT28),APT-C-53(Gamaredon),MuddyWater,DarkHydrus,APT-C-00(海莲花)"
  },
  {
    "viewDay": "20240408",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240409",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240410",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240411",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240412",
    "aptNum": 10,
    "aptOrg": ""
  },
  {
    "viewDay": "20240413",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240414",
    "aptNum": 8,
    "aptOrg": ""
  },
  {
    "viewDay": "20240415",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240416",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240417",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240418",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240419",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240420",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240421",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240422",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240423",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240424",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240425",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240426",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240427",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240428",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240429",
    "aptNum": 0,
    "aptOrg": ""
  },
  {
    "viewDay": "20240430",
    "aptNum": 0,
    "aptOrg": ""
  },
]
import { formatTimeByMoment } from '@/utils/time.js'
export default {
  name: "CalendarMap",
  data() {
    return {
      dataLoading: true,
      monthVal: '',
    }
  },
  props: {
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  /*watch: {
    datePickerValue: {
      handler(oldVal, newVal) {
        if(isEqual(oldVal, newVal)){
          return false;
        }
        this.initComp();
      },
      deep: true
    }
  },*/
  created() { },
  methods: {
    initComp() {
      console.log('日历组件获取数据了------', this.datePickerValue);
      this.monthVal = formatTimeByMoment(this.datePickerValue[0], 'M');
      new Promise((resolve) => {
        resolve(true);
      }).then(() => {
        this.formatData(chartData)
      })
    },
    formatData(data) {
      let values = data.map(el => el.aptNum);
      let max = Math.max(...values);
      let lunarData = [];
      for (let i = 0; i < data.length; i++) {
        let day = formatTimeByMoment(data[i].viewDay, 'YYYY-MM-DD')
        lunarData.push([
          day,
          0, // 不知道干啥用的，反正有用
          data[i].aptNum,
          data[i].aptOrg,
        ]);
      }
      this.initChart(lunarData, max);
      this.dataLoading = false;
    },
    initChart(lunarData, max) {
      const cellSize = [35, 35];
      const that = this;
      const option = {
        tooltip: {
          confine: true,
          formatter: function (params) {
            return `
              <div style="max-width: 300px">
                    <div>${params.data[0]}</div>
                    <div style="width:100%; white-space:pre-wrap">${params.data[3]}</div>
                    <div>数量：${params.data[2]}</div>
              </div>
            `;
          }
        },
        visualMap: {
          show: false,
          max: 300,
          calculable: true,
          seriesIndex: [2],
          orient: 'horizontal',
          left: 'center',
          bottom: 20,
          inRange: {
            color: ['#e0ffff', '#006edd'],
            opacity: 0.3
          },
          controller: {
            inRange: {
              opacity: 0.5
            }
          }
        },
        calendar: [{
          left: 'center',
          top: 35,
          cellSize: cellSize,
          yearLabel: {show: false},
          orient: 'vertical',
          dayLabel: {
            show: true,
            position: 'start',
            firstDay: 1,
            fontSize: 14,
            nameMap: 'cn'
          },
          splitLine: {
            show: false,
          },
          monthLabel: {
            show: false
          },
          range: lunarData.length > 0 ? lunarData[0][0].slice(0, 7) : '' // 某年、某月  https://echarts.apache.org/zh/option.html#calendar.range
        }],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'calendar',
            symbolSize: function (val, params) {
              let itemValue = val[2];
              let itemStyle = (itemValue / max) * 18;
              if (itemStyle < 5 && itemStyle != 0) itemStyle = 5;
              if (itemStyle == 0) {
                itemStyle = 2;
              }
              return itemStyle;
            },
            itemStyle: {
              normal: {
                color: 'rgba(255,55,135,1)', // 颜色
                borderWidth:  18,
                borderColor: 'rgba(255,255,255, 0)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function (params) {
                  return '    ' + that.$echarts.format.formatTime('dd', params.value[0]);
                },
                offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                textStyle: {
                  color: '#333',
                  fontSize: 14,
                  textAlign: 'center',
                  lineHeight: 15,
                }
              }
            },
            symbol: 'circle', // circle, rect, roundRect, triangle,  pin, diamond, arrow,
            data: lunarData
          },
        ]
      }
      let chart = this.$echarts.init(this.$refs.calenderChart);
      chart.setOption(option, true);
      chart.resize(true);
    }
  }
}
</script>

<style scoped lang="scss">
.calendar-map-area.card-area {
  width: 430px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .card-title {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    > h3 {
      color: #808191;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .content-area {
    width: 100%;
    height: 253px;
    padding: 0 15px 15px 15px;

    .calender-chart {
      width: inherit;
      height: 233px;
    }
  }
}
</style>